
<template>
    <div>
        <!-- 基本信息弹窗 -->
        <Modal
            v-model="establishInfoModal"
            width="1500px"
            styles='text-align:center'
            :closable="false"
            :mask-closable="false"
            footer-hide >
            <div class="container">
                <h2 class="tit">变更复审信息申请填报</h2>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                    <div class="left-part">
                        <div class="title">互联网医院设立情况</div>
                        <Row style="margin-right: 15px">
                            <Col span="8">    
                                <!-- 医疗质量管理部门 -->
                                <div class="address">
                                    <div class="left">
                                        <span>医疗质量管理部门：</span>
                                    </div>
                                    <FormItem class="right">
                                    <iSwitch size="large" v-model="formValidate.situation.qualitySupervision">
                                        <span slot="open">是</span>
                                        <span slot="close">否</span>
                                    </iSwitch>
                                    </FormItem>
                                </div>   
                                <!-- 服务器型号 -->
                                <div class="address">
                                    <div class="left">
                                    <span>服务器型号：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Input
                                            v-if="notReview"
                                            v-model.trim="formValidate.situation.serverModel"
                                            placeholder
                                            clearable
                                            style="margin-right:10px"
                                        />
                                        <div style="height:35px" v-else>{{formValidate.situation.serverModel}}</div>
                                    </FormItem>
                                </div> 
                                <!-- 音视频系统型号 -->
                                <div class="address">
                                    <div class="left">
                                        <span>音视频系统型号：</span>
                                    </div>
                                    <FormItem prop="hospitalNature">
                                        <Input
                                            v-if="notReview"
                                            v-model.trim="formValidate.situation.systemMode"
                                            placeholder
                                            clearable
                                            style="margin-right:10px"
                                        />
                                        <div style="height:35px" v-else>{{formValidate.situation.systemMode}}</div>
                                    </FormItem>
                                </div>
                                <!-- 传输链路宽带 -->
                                <div class="address">
                                    <div class="left">
                                        <span>传输链路宽带：</span>
                                    </div>
                                    <FormItem class="right" prop="linkmanTelephone">
                                        <Input
                                            v-if="notReview"
                                            v-model.trim="formValidate.situation.bandwidth"
                                            maxlength = '25'
                                            placeholder
                                            clearable
                                        />
                                        <div style="height:35px" v-else>{{formValidate.situation.bandwidth}}</div>
                                    </FormItem>
                                </div>        
                                <!-- 信息系统技术手册文件名称 -->
                                <div class="address">
                                    <div class="left">
                                        <span>信息系统技术手册文件名称：</span>
                                    </div>
                                    <FormItem class="right" prop="linkmanTelephone">
                                        <span>未选择任何文件</span>
                                    </FormItem>
                                </div>  
                                <!-- 信息系统安全等级保护级别 -->
                                <div class="address hongdian">
                                    <div class="left">
                                        <span style="color:red;">*</span>
                                        <span>信息系统安全等级保护级别：</span>
                                    </div>
                                    <FormItem class="right" prop="safetyLevel" >
                                        <Select v-if="notReview" v-model="formValidate.situation.safetyLevel">
                                            <Option
                                                v-for="item in infoProteLevel"
                                                :value="item.dictType"
                                                :key="item.dictType"
                                            >{{ item.dictName}}</Option>
                                        </Select>
                                        <div style="height:35px" v-else class="content">{{(infoProteLevel.filter((item) => formValidate.situation.safetyLevel === item.dictType)[0] || {}).dictName}}</div>
                                    </FormItem>                      
                                </div>     
                                <!-- 电子病历等级 -->
                                <div class="address">
                                    <div class="left">
                                        <span>电子病历等级：</span>
                                    </div>
                                    <FormItem class="right">
                                        <Select v-if="notReview" v-model="formValidate.situation.emrLevel">
                                            <Option
                                                v-for="item in emrLevel"
                                                :value="item.dictType"
                                                :key="item.dictType"
                                            >{{ item.dictName}}</Option>
                                        </Select>
                                        <div style="height:35px" v-else class="content">{{(emrLevel.filter((item) => formValidate.situation.emrLevel === item.dictType)[0] || {}).dictName}}</div>
                                    </FormItem>                      
                                </div>     
                                <!-- 区域信息病案共享 -->
                                <div class="address">
                                    <div class="left">
                                        <span>区域信息病案共享：</span>
                                    </div>
                                    <FormItem class="right">
                                        <iSwitch size="large" v-model="formValidate.situation.isShare">
                                            <span slot="open">是</span>
                                            <span slot="close">否</span>
                                        </iSwitch>
                                    </FormItem>
                                </div>         
                            </Col>                 
                            <Col span="8">
									<!-- 信息技术服务与管理部门 -->
									<div class="address">
										<div class="left">
											<span>信息技术服务与管理部门：</span>
										</div>
										<FormItem class="right">
											<iSwitch size="large" v-model="formValidate.situation.technicalSupervision">
												<span slot="open">是</span>
												<span slot="close">否</span>
											</iSwitch>
										</FormItem>
									</div>   
									<!-- 服务器数量 -->
									<div class="address">
										<div class="left">
											<span>服务器数量：</span>
										</div>
										<FormItem class="right">
											<Input
												v-if="notReview"
												v-model.trim="formValidate.situation.serverNum"
												placeholder
												clearable
												style="100%"
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.serverNum}}</div>
										</FormItem>
									</div>
									<!-- 音视频系统数量 -->
									<div class="address">
										<div class="left">
											<span>音视频系统数量：</span>
										</div>
										<FormItem class="right">
											<Input
											v-if="notReview"
											v-model.trim="formValidate.situation.systemNum"
											placeholder
											clearable
											style="100%"
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.systemNum}}</div>
										</FormItem>
									</div>
									<!-- 音视频系统数量 -->
									<div class="address">
										<div class="left">
											<span>诊疗服务信息系统名称：</span>
										</div>
										<FormItem class="right">
											<Input
											v-if="notReview"
											v-model.trim="formValidate.situation.systemName"
											placeholder
											clearable
											style="100%"
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.systemName}}</div>
										</FormItem>
									</div>
									<!-- 信息系统操作手册文件名称 -->
									<div class="address">
										<div class="left">
											<span>信息系统操作手册文件名称：</span>
										</div>
										<FormItem class="right" prop="linkmanTelephone">
											<span>未选择任何文件</span>
										</FormItem>
									</div>  
									<!-- 信息系统安全等级保护级别证书 -->
									<div class="address">
										<div class="left">
											<span>信息系统安全等级保护级别证书：</span>
										</div>
										<FormItem class="right" prop="linkmanTelephone">
											<span>未选择任何文件</span>
										</FormItem>
									</div>  
									<!-- 信息系统安全等级保护级别证书 -->
									<div class="address">
										<div class="left">
											<span>电子病历等级证书：</span>
										</div>
										<FormItem class="right" prop="linkmanTelephone">
											<span>未选择任何文件</span>
										</FormItem>
									</div>  
								</Col>
								<Col span="8">
									<!-- 医学服务部门 -->
									<div class="address">
										<div class="left">
											<span>医学服务部门：</span>
										</div>
										<FormItem class="right">
											<iSwitch size="large" v-model="formValidate.situation.serviceSupervision">
												<span slot="open">是</span>
												<span slot="close">否</span>
											</iSwitch>
										</FormItem>
									</div>   
									<!-- 服务器地址 -->
									<div class="address" >                     
										<div class="left">             
											<span>服务器地址：</span>
										</div>
										<FormItem class="right">
											<Input
											v-if="notReview"
											v-model.trim="formValidate.situation.serverAddress"
											placeholder="请输入服务器地址"
											clearable                         
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.serverAddress}}</div>
										</FormItem>
									</div>
									<!-- 传输链路 -->
									<div class="address" >                     
										<div class="left">             
											<span>传输链路：</span>
										</div>
										<FormItem class="right">
											<Input
												v-if="notReview"
												v-model.trim="formValidate.situation.transmissionLink"
												placeholder="请输入传输链路"
												clearable                         
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.transmissionLink}}</div>
										</FormItem>
									</div>
									<!-- 远程医疗互联网服务网址 -->
									<div class="address">
										<div class="left">
											<span>远程医疗互联网服务网址：</span>
										</div>
										<FormItem class="right">
											<Input
												v-if="notReview"
												v-model.trim="formValidate.situation.website"
												placeholder="请输入远程医疗互联网服务网址"
												clearable                         
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.website}}</div>
										</FormItem>
									</div>
									<!-- 互联网医院设立可行性研究报告 -->
									<div class="address">
										<div class="left">
											<span>互联网医院设立可行性研究报告：</span>
										</div>
										<FormItem class="right" prop="linkmanTelephone">
											<span>未选择任何文件</span>
										</FormItem>
									</div>  
									<!-- 信息安全等级保护证书获取时间 -->
									<div class="address">
										<div class="left">
											<span>信息安全等级保护证书获取时间：</span>
										</div>
										<FormItem>
											<DatePicker
												v-if="notReview"
												type="date"
												v-model="formValidate.situation.safetyCertTime"
												placeholder="请选择时间"
											></DatePicker>
											<div v-else class="content">{{formValidate.situation.safetyCertTime}}</div>
										</FormItem>
									</div>
									<!-- 电子病历等级证书获取时间 -->
									<div class="address">
										<div class="left">
											<span>电子病历等级证书获取时间：</span>
										</div>
										<FormItem>
											<DatePicker
												v-if="notReview"
												type="date"
												v-model="formValidate.situation.emrCertTime"
												placeholder="请选择时间"
											></DatePicker>
											<div v-else class="content">{{formValidate.situation.emrCertTime}}</div>
										</FormItem>
									</div>
								</Col>
								<Col span="24">
									<div class="address">
										<div class="left">
											<span>与省级互联网医疗服务监管平台对接情况：</span>
										</div>
										<FormItem class="right">
											<Input
												v-if="notReview"
												v-model.trim="formValidate.situation.regulatoryPlatformDockingSituation"
												placeholder
												clearable
												style="100%"
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.regulatoryPlatformDockingSituation}}</div>
										</FormItem>
									</div>
									<div class="address">
										<div class="left">
											<span>与省远程医疗服务平台对接情况：</span>
										</div>
										<FormItem class="right">
											<Input
												v-if="notReview"
												v-model.trim="formValidate.situation.servicePlatformDockingSituation"
												placeholder
												clearable
												style="100%"
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.servicePlatformDockingSituation}}</div>
										</FormItem>
									</div><div class="address">
										<div class="left">
											<span>服务功能：</span>
										</div>
										<FormItem class="right">
											<Input
												v-if="notReview"
												v-model.trim="formValidate.situation.serviceFunction"
												placeholder
												clearable
												style="100%"
											></Input>
											<div style="height:35px" v-else>{{formValidate.situation.serviceFunction}}</div>
										</FormItem>
									</div>
								</Col>
                            <Col span="24">
                                <!-- 变更原因说明 -->
                                <div class="address hongdian" >                     
                                    <div class="left">  
                                        <span style="color:red;">*</span>                      
                                        <span>变更原因说明：</span>
                                    </div>
                                    <FormItem class="right" prop="reasonChange">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.reasonChange"
                                        placeholder="请输入变更原因"
                                        clearable  
                                        style="width:75%"                       
                                        ></Input>
                                        <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.reasonChange}}</div>
                                    </FormItem> 
                                </div>
                            </Col>
                        </Row>
                    </div> 
                </Form>
            </div>
            <div class="btn">
                <Button type="info" v-if="notReview" @click="handleSubmit('formValidate',1)" :disabled="disabled">
                    <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />
                    保存并提交
                </Button>
                <Button type="primary" @click="handleSubmit('formValidate',0)" style="margin-left:30px" v-if="notReview" >
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>暂存数据
                </Button>
                <Button @click="establishInfoModal = false" style="margin-left:30px">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭返回
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import { DatePicker } from "view-design";
export default {
    components: {
		newfourLevelLinkage,
        DatePicker
	},
    props: {
		establishInfoModal: String,
        reasonChange: String,
        id: Number,
	},
    data() {
        return {
            //城市列表
			provList: [],
			cityList: [],
			countyList: [],
			province: null,
			city: null,
			area: null,
            formValidate: {
				hospitalType: 1,
				id: null,
				//互联网医院设立情况
				situation: {
                    qualitySupervision: '',
                },
				reasonChange: null,
			},
			ruleValidate: {
				//信息系统安全等级保护级别
				safetyLevel: [ { required: true, message: "请选择信息系统安全等级保护级别", trigger: "change" } ],
                // 变更原因
				reasonChange: [ { required: true, message: "请输入变更原因", trigger: "change" } ],
			},
            notReview: true,
            yljglb:[],             //组织类
            // 单位类属
			hospitalSuperior: [],
            infoProteLevel:[],             //信息系统安全等级保护级别
			emrLevel:[],             //电子病历等级
            backId: '',
        }
    },
    mounted() {
        //获取字典
		this.getGrade()
        //复审获取详情
        if(this.id) {
            this.$axios.post(api.findSuperviseByReviewApplyId, {reviewApplyId: this.id}).then(res => {
				if (res.data.success) {
					let ret = res.data.object || [];
					this.formValidate = ret
                    this.backId = this.formValidate.id
				}
			});
        } else {
            //获取机构设立信息详情
            this.getHospilalSituation()
        }     
    },
    created() {

    },
    methods: {
        //获取机构设立信息详情
        getHospilalSituation() {
            this.$axios.post(api.findHospitalSituationByOrgCode, {}).then(resp => {
				let ret = resp.data.object
                this.formValidate = ret
			}).catch(err => {
				console.log(err);
			});
        },
        //获取字典
		getGrade() {
			this.$axios.post(api.findDictType, {}).then(resp => {
				let ret = resp.data.object
				this.infoProteLevel = ret.SECURITY_PROTECTION_LEVEL
				this.emrLevel = ret.EMR_LEVEL
			}).catch(err => {
				console.log(err);
			});
		},
        //更改审核状态
        updateType(val) {
            this.$axios.post(api.updateReviewStatusById, {id: this.id,reviewStatus:val}).then(resp => {
                    this.$Message.success("操作成功");
                    this.disabled = false 
					this.establishInfoModal = false
                    this.$emit('getSuperviseData');
                }).catch(err => {
                    console.log(err);
                });
        },
        // 提交表单
		handleSubmit(name,val) {	    
			this.disabled = true
			this.$refs[name].validate(valid => {
				if (valid) {
					this.hospitalSuperior.forEach(i =>{
                        if(i.orgCode == this.formValidate.orgParentCode){
                            this.formValidate.orgParentName = i.orgName
                        }
					})
					//信息系统安全等级保护级别名称
					this.infoProteLevel.forEach(i=>{
						if(this.formValidate.situation.safetyLevel == i.dictType){
							this.formValidate.situation.safetyLevelName = i.dictName
						}
					})
					//信息系统安全等级保护级别名称
					this.emrLevel.forEach(i=>{
						if(this.formValidate.situation.emrLevel == i.dictType){
							this.formValidate.situation.emrLevelName = i.dictName
						}
					})
                    this.formValidate.reviewStatus = val
					if(this.mode === 'add') {
						this.formValidate.id = ''
					}
                    let url;
                    if(this.id){
                        this.formValidate.id = this.backId
                        url = api.updateSuperviseReview
                    } else {
                        url = api.insertSuperviseReview
                    }
					console.log(this.formValidate)
					this.$axios
					.post(url, this.formValidate)
					.then(res => {
						if (res.data.code) {
							let ret = res.data;
							this.updateType(val)
						} else {
							this.disabled = false 
							this.$Message.error(res.data.message);
						}
					})
					.catch(err => {
						this.disabled = false
						this.$Message.error(res.data.err);
					});
				} else {
					this.disabled = false 
					// 必填项填写失败
					this.$Message.error("请检查必填项是否填写正确！");
				}
			});
		},
    },
}
</script>
<style lang="less" scoped>
.tit {
    text-align: center;
    font-weight: 550;
}
.btn {
    width:100%;
    text-align:center;
    margin-bottom: 20px;
}
.container {
    width: 100%;
    margin-bottom: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
      .left-part {
        width: 98%;
        margin: 20px auto;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;         
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -10px;
        //   margin-left: 35px;
          margin: 10px 0 0 30px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          min-width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        // flex-direction: row;    
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
	  .tubiao {
        font-size:16px;
        margin-right:5px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 500px;
      }
		.protocol {
			display: flex;
			margin: 0 40px;
			padding-bottom: 15px;
			.sort {
				width: 40%;
				margin-right: 30px;
				font-size: 14px;
				font-weight: 550;
			}
			.dsort {
				width: 16%;
				margin-right: 20px;
				font-size: 14px;
				font-weight: 550;
			}
			.asd {
				display: flex;
				.inputbox {
					width:83%;
					margin-left: 10px;
				}
			}
		}
	 	.b {
			font-size: 14px;
			color: #ff9966;
			margin-left: 20px;
		} 
  }
</style>
